<template>
	<div>
		<nav-bar title="图文详情"/>
		<div class="photo-title">
			<p>图文id:{{info.id}}</p>
			<span>发起日期：{{info.time | convertTime('YYYY-MM-DD')}}</span>
			<span>1次浏览</span>
			<span>分类：民生经济</span>
		</div>

		<div class="my-preview">
			<vue-preview :slides="imgs"></vue-preview>
		</div>
		<!-- <ul>
			 <li v-for="(img,index) in imgs" :key="img.ID">
				<img :src="img.img">
			</li> 
		</ul> -->
		<div class="photo-desc">
			<p v-html="info.img"></p>
		</div>

		<!-- 使用评论组件,cid:帖子id -->	
		<comment :cid="$route.query.id"></comment>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				info:{}, // 图文数据
				imgs:[], // 缩略图
			}
		},
		created() {
			let id = this.$route.query.id;
			// 发请求 获取详情
			this.$axios.get('https://api.apiopen.top/getImages'/* + id*/)
			.then( res =>{
				// 数据为数组，为了方便直接去、取0
				this.info = res.data.result[0];
			})
			.catch( err => console.log('图文详情获取失败',err));

			// 模拟获取缩略图
			this.$axios.get('https://api.apiopen.top/getImages'/* + id*/)
			.then( res =>{
				this.imgs = res.data.result;
				// 使用vue-preview时给img的属性
				this.imgs.forEach(img => {
					img.msrc = img.img;
					img.w = 600;
					img.h = 400;
				})
				console.log(this.imgs);
			})
			.catch( err => console.log('缩略图获取失败',err));
		}
	}
</script>
<style scoped>
	li {
		list-style: none;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	.photo-title {
		overflow: hidden;
	}
	.photo-desc {
		border-bottom: 1px solid rgba(0,0,0,0.2);
		padding-bottom: 5px;
		margin-bottom: 5px;
		padding-left: 5px;
	}
	.photo-title p {
		color: #13c2f7;
		font-size: 20px;
		font-weight: bold;
	}
	.photo-title span {
		margin-right: 20px;
	}
	.photo-desc p {
		font-size: 18px;
	}

	
</style>